const SliderId = "custom-favorite-slider";

class SliderControl {
    constructor(doc, sibling, conf) {
        this.doc = doc;
        this.existsSlider = sibling;
        this.SliderId = SliderId;
        this.HostUrl = "";
        if (conf != undefined && conf.HOST) {
            this.HostUrl = conf.HOST;
        }
        this.element = $("<div>").attr("id", this.SliderId)
            .width("240px")
            .css({
                "overflow": "scroll"
            });
        /**
         * 需要被打开的目录名字前缀
         * @type {string[]}
         */
        this.opened = ["经营管理", "现场管理"];
    }
    setOpenedCategory (titles) {
        this.opened = titles;
    }
    build(data) {
        this.existsSlider.parent().prepend(this.element);
        var ul = this.buildUiTree(data);
        this.element.append($("<div>").addClass(this.SliderId + "-jstree").css({
            "margin-bottom": "60px",
        }).append(ul));

        this.element.append($("<div>")
            .attr("id", this.SliderId + "-jstree-close-btn")
            .css({"display": "flex",
                "bottom": "0",
                "position": "fixed",
                "cursor": "pointer",
                "background-color": "#f4f7fa"})
            .append(
                $("<span class='group-setting form-created ant-dropdown-trigger'>")
                    .css({
                        "padding": "9px 90px",
                        "color": "#107fff",
                    }).text("关闭左侧")
            ).click(()=>{
                this.remove();
            }));
        return this;
    }
    remove() {
        this.element.remove();
    }

    render() {
        $("." + this.SliderId + "-jstree").jstree()
            .on("select_node.jstree", this._onNodeSelect);
    }

    _onNodeSelect(e, data) {
        if (data && data.event && data.event.currentTarget) {
            var link = data.node.data.jstree.link;
            if (link) {
                var hash = link.match("#/.+");
                if (hash) {
                    window.top.location.hash = hash[0];
                } else {
                    window.top.location.href = link;
                }
            } else if (data.instance.is_parent(data.node.id)){
                data.instance.toggle_node(data.node.id);
            }
        }
    }

    /**
     * 构建 html 结构，需要符合 js tree 的规范
     * @param {JQueryElement} ele
     * @param {array} data
     */
    buildUiTree(data) {
        var thisLevel = $("<ul>");
        var opened = "false";
        for(var i = 0;i < data.length;i ++) {
            opened = this.opened.indexOf(data[i].name) == -1 ? "false": "true";
            var subTree = null;
            if (data[i].sub.length > 0) {
                subTree = this.buildUiTree(data[i].sub);
            }
            if (subTree == null) {
                subTree = thisLevel.append(
                    $("<li>").text(data[i].name).attr("data-jstree",
                        '{"link":"'+ data[i].link +'", "icon":"custom-favorite-slider-icon-link"}')
                );
            } else {
                subTree = thisLevel.append(
                    $("<li>").text(data[i].name).append(subTree).attr("data-jstree",
                        '{"opened": '+ opened +', "link":"'+ data[i].link +'", "icon": "custom-favorite-slider-icon-folder"}')
                );
            }
            // subTree;
            thisLevel.append(subTree);
        }
        return thisLevel;
    }
}
export default {
    getInstance: function sliderControl(doc, existsSlider, conf) {
        return new SliderControl(doc, existsSlider, conf);
    },
    isSliderExists(root) {
        return root.find("#" + SliderId).length == 1;
    }
}
